<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>鼠标拖动练习</title>
    <style>
        .box1 {
            width: 100px;
            height: 100px;
            background-color: #af45f8;
            border-radius: 50%;
            position: absolute;
        }
    </style>
</head>
<body>
        <div class="box1">

        </div>
</body>


<script type="text/javascript">

    let box1 = document.querySelector(".box1");

    let box1X = 50;
    let box1Y = 50;
    // document.onmousemove = function (event) {
    //     console.log(event.clientX)
    //     console.log(event.clientY)
    //     box1.style.left = event.pageX+"px";
    //     box1.style.top = document.body.scrollTop+event.pageY+"px";
    // }
    box1.onmousedown = function (event) {
        //解决拖拽圆心
        box1X = event.offsetX;
        box1Y = event.offsetY;

        document.onmousemove = function (event) {

            box1.style.left = (event.pageX-box1X)+"px";
            box1.style.top = (event.pageY-box1Y)+"px";
        }

        document.onmouseup = function () {

            // 同时取消两个事件
            document.onmousemove = null;
            document.onmouseup = null;

        }
    }

    box1.onmouseover = function () {

        box1.onmousewheel = function (event) {
            if (event.wheelDelta > 0) {
                box1.style.width = (box1.clientWidth + 5) +"px";
                box1.style.height = (box1.clientHeight+ 5) +"px";
            } else {
                box1.style.width = (box1.clientWidth - 5) +"px";
                box1.style.height = (box1.clientHeight - 5) +"px";
            }
        }
    }





</script>
</html>